<template>
  <div class="container">
    <div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="路由标题" prop="title">
                <el-input v-model="appendlist.title" placeholder="路由标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由名称" prop="name">
                <el-input v-model="appendlist.name" placeholder="路由名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="路由路径" prop="path">
                <el-input v-model="appendlist.path" placeholder="路由路径"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由转发路径" prop="redirect">
                <el-input v-model="appendlist.redirect" placeholder="路由名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="组件地址" prop="component">
                <el-input v-model="appendlist.component" placeholder="组件地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单图标" prop="icon">
                <el-input v-model="appendlist.icon" placeholder="菜单图标"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="英文名称" prop="nameEn">
                <el-input v-model="appendlist.nameEn" placeholder="英文名称"></el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="12">-->
              <!--<el-form-item label="是否可配置实用工具" prop="isUtilityConfiguration">-->
                <!--<el-select v-model="appendlist.isUtilityConfiguration" clearable placeholder="是否可配置实用工具">-->
                  <!--<el-option-->
                    <!--v-for="item in isUtilityConfigurationOptions"-->
                    <!--:key="item.type"-->
                    <!--:label="item.value"-->
                    <!--:value="item.type">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
            <!--</el-col>-->
            <el-col :span="12">
              <el-form-item label="是否可被搜索" prop="isSearch">
                <el-select v-model="appendlist.isSearch" clearable placeholder="是否可被搜索">
                  <el-option
                    v-for="item in isSearchOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="功能类型" prop="type">
                <el-select v-model="appendlist.type" clearable placeholder="功能类型">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否隐藏" prop="isHidden">
                <el-select v-model="appendlist.isHidden" clearable placeholder="是否隐藏">
                  <el-option
                    v-for="item in HiddenOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="appendlist.sort" placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Tab 标签 ID" prop="tabId">
                <el-input v-model="appendlist.tabId" placeholder=""></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="API 访问地址" prop="apiUrl">
                <el-input v-model="appendlist.apiUrl" placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="API 访问Method" prop="apiMethod">
                <el-select v-model="appendlist.apiMethod" clearable placeholder="">
                  <el-option
                    v-for="item in methodOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <!--<el-col :span="12">
              <el-form-item label="允许访问时间">
                <el-time-picker
                  value-format="HH:mm:ss"
                  style="width: 150px"
                  v-model="appendlist.accessStart"
                  placeholder="">
                </el-time-picker>
                <el-time-picker
                  arrow-control
                  style="width: 150px"
                  value-format="HH:mm:ss"
                  v-model="appendlist.accessEnd"
                  placeholder="">
                </el-time-picker>
              </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="所属子系统" prop="subsysid">
                <el-select v-model="appendlist.subsysid" clearable placeholder="">
                  <el-option
                    v-for="item in subsys.records"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否在tab栏显示" prop="tabIsHidden">
                <el-select v-model="appendlist.tabIsHidden" clearable placeholder="是否显示">
                  <el-option
                    v-for="item in tabsOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="第三方链接类型" prop="linkType">
                <el-select v-model="appendlist.linkType" clearable placeholder="第三方链接类型">
                  <el-option
                    v-for="item in linkTypeOptions"
                    :key="item.codeKey"
                    :label="item.codeName"
                    :value="item.codeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="链接" prop="href">
                <el-input type="input"  v-model="appendlist.href" placeholder="链接"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="是否加载页面缓存" prop="nocache">
                <el-select v-model="appendlist.nocache" clearable placeholder="是否加载页面缓存">
                  <el-option
                    v-for="item in nocacheOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="app是否使用" prop="appIsUse">
                <el-select v-model="appendlist.appIsUse" clearable placeholder="app是否使用" >
                  <el-option
                    v-for="item in appIsUseOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12"  v-if="appendlist.appIsUse ==='1'">
              <el-form-item label="工作流业务类型ID" prop="workFlowBusinessId">
                <el-input type="textarea"  v-model="appendlist.workFlowBusinessId" placeholder="工作流业务类型ID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea"  v-model="appendlist.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">保 存</el-button>
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['addmenuId'],
    data() {
      return {
        tabsOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        appIsUseOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        nocacheOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        typeOptions: [],
        linkTypeOptions: [],
        methodOptions: [
          {
            type: '0',
            value: 'GET'
          },
          {
            type: '1',
            value: 'POST'
          },
          {
            type: '2',
            value: 'HEAD'
          },
          {
            type: '3',
            value: 'OPTIONS'
          },
          {
            type: '4',
            value: 'PUT'
          },
          {
            type: '5',
            value: 'DELETE'
          },
          {
            type: '6',
            value: 'TRACE'
          },
          {
            type: '7',
            value: 'CONNECT'
          }
        ],
        HiddenOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        isUtilityConfigurationOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        isSearchOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        appendlist: {
          parentId: this.addmenuId.list.parentid,
          title: '',
          name: '',
          path: '',
          redirect: '',
          component: '',
          icon: '',
          type: '',
          isHidden: '',
          tabIsHidden: '',
          sort: '',
          apiUrl: '',
          tabId: '',
          accessStart: '',
          accessEnd: '',
          remarks: '',
          subsysid: '',
          linkType: '',
          appIsUse: '1',
          workFlowBusinessId:'',
          isUtilityConfiguration:'0',
          isSearch:'1'
        },
        appendrules: {
          title: [
            { message: '标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          name: [
            { message: '路由名称不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          path: [
            { message: '路由路径不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          redirect: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          component: [
            { message: '组件地址不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          icon: [
            { required: false, trigger: 'blur' }
          ],
          // isUtilityConfiguration: [
          //   { message: '是否可配置实用工具', required: true, trigger: 'change' }
          // ],
          isSearch: [
            { message: '是否可被搜索', required: true, trigger: 'change' }
          ],
          nocache: [
            { message: '是否加载页面缓存不能为空', required: true, trigger: 'change' }
          ],
          type: [
            { message: '功能类型不能为空', required: true, trigger: 'change' }
          ],
          isHidden: [
            { message: '是否隐藏不能为空', required: true, trigger: 'change' }
          ],
          tabIsHidden: [
            { message: '是否Tab隐藏不能为空', required: true, trigger: 'change' }
          ],
          sort: [
            { message: '排序不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
          ],
          apiUrl: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          tabId: [
            { required: false, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          accessStart: [
            { required: false, trigger: 'blur' }
          ],
          accessEnd: [
            { required: false, trigger: 'blur' }
          ],
          remarks: [
            { message: '备注不能为空', required: false, trigger: 'blur' },
            { min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur' }
          ],
          href: [
            { message: '链接不能为空', required: false, trigger: 'blur' },
            { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
          ],
          subsysid: [
            { message: '所属子系统不能为空', required: true, trigger: 'change' }
          ]
        },
        subsys: {},
        list: this.addmenuId.list,
        MenuTree: {}
      }
    },
    created() {
      this.GetCodeList()
      this.GetLinkTypeCodeList()
      this.subsysData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['subsysData']
    },
    methods: {
      GetCodeList() {
        let args = {}
        args.codeType = 'ORG_TYPE_CATEGORY_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.typeOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      GetLinkTypeCodeList() {
        let args = {}
        args.codeType = 'LINK_TYPE_CATEGORY_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.linkTypeOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      subsysData() {
        this.$store.dispatch('SubsysSelect', this.MenuTree).then(res => {
          this.subsys = res.data
        }).catch((err) => {
          console.log(err)
        })
      },
      appendData() {
        this.$store.dispatch('MenuaddTree', this.appendlist).then(res => {
          this.$emit('listfresh')
          // this.$router.push({
          //   name: 'menuManagement'
          // })
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$emit('changeCloseDialog')
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.appendData()
          } else {
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelSubmit() {
        this.$emit('changeCloseDialog')
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
